<template>
  <!-- 处理my-tabs的html结构 -->

  <view class="tab-container">
    <view class="tab-box">
      <scroll-view
        scroll-x
        class="scroll-view"
        scroll-width-animation
        :scroll-left="scrollLeft"
      >
        <view class="scroll-content">
          <view class="tab-item-box">
            <block v-for="(item, index) in tabData" :key="index">
              <view
                :id="'_tab_' + index"
                class="tab-item"
                :class="{ 'tab-item-active': activeIndex === index }"
                @click="onTabClick(index)"
                :style="{
                  color:
                    activeIndex === index
                      ? defaultConfig.activeTextColor
                      : defaultConfig.textColor,
                }"
                >{{ item.label || item }}</view
              >
            </block>
          </view>
          <!-- 底部滑块 -->
          <view
            class="underline"
            :style="{
              transform: 'translateX(' + slider.left + 'px)',
              width: defaultConfig.underLineWidth + 'px',
              height: defaultConfig.underLineHeight + 'px',
              backgroundColor: defaultConfig.underLineColor,
            }"
          ></view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'my-tabs',
  props: {
    //   1.可以再父组件中定制样式
    config: {
      type: Object,
      //   default 如果是复杂数据类型，那么需要指定value是一个函数，通过返回值的形式执行默认值
      default: () => {
        return {};
      },
    },
    // 2.可以在父组件中指定数据
    tabData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 3.可以再父组件中指定选中项，若不指定，默认0
    defaultIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tabList: [],

      // 当前激活想的index
      activeIndex: -1,
      // 滑块
      slider: {
        // 滑块距离左侧的距离
        left: 0,
      },
      // scrollView 的横向滚动条位置
      scrollLeft: 0,
      // 默认是配置
      defaultConfig: {
        textColor: '#333333',
        activeTextColor: '#f94d2a',
        // 下划线的宽度
        underLineWidth: 24,
        // 下划线的高度
        underLineHeight: 2,
        // 下划线的颜色
        underLineColor: '#f94d2a',
      },
    };
  },
  watch: {
    config: {
      handler(val) {
        this.defaultConfig = { ...this.defaultConfig, ...val };
      },
      immediate: true,
    },
    // 监听激活项变化
    tabData: {
      // 当defaultIndex发生变化时，回调的方法
      handler(val) {
        this.tabList = val;
        setTimeout(() => {
          this.updateTabWidth();
        }, 0);
      },
      immediate: true,
    },

    // 监听激活项变化
    defaultIndex: {
      // 当defaultIndex发生变化时，回调的方法
      handler(val) {
        this.activeIndex = val;
        // 重新计算 滑块位置
        this.tabToIndex();
      },
      immediate: true,
    },
  },
  methods: {
    // 更细谈的宽度
    updateTabWidth() {
      let data = this.tabList;
      if (data.length === 0) return;
      const query = uni.createSelectorQuery().in(this);
      data.forEach((item, index) => {
        query
          .select('#_tab_' + index)
          .boundingClientRect((res) => {
            // console.log(res);
            item._slider = {
              left:
                res.left + (res.width - this.defaultConfig.underLineWidth) / 2,
            };
            if (data.length - 1 === index) {
              this.tabToIndex();
            }
          })
          .exec();
      });
    },

    onTabClick(index) {
      this.activeIndex = index;
      this.tabToIndex();
      // 发送一个通知，通知表示激活项发生变化了,其实，就是回调父组件
      this.$emit('tabClick', index);
    },
    tabToIndex() {
      if (this.tabList.length === 0) return;
      const index = this.activeIndex;
      this.slider = {
        left: this.tabList[index]._slider.left,
      };
      // 控制scoll
      this.scrollLeft = this.activeIndex * this.defaultConfig.underLineWidth;
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-container {
  font-size: $uni-font-size-base;
  height: 45px;
  line-height: 45px;
  background-color: $uni-bg-color;
  .tab-box {
    width: 100%;
    height: 45px;
    display: flex;
    position: relative;
    .scroll-view {
      white-space: nowrap;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .scroll-content {
        width: 100%;
        height: 100%;
        position: relative;
        .tab-item-box {
          height: 100%;
          .tab-item {
            height: 100%;
            display: inline-block;
            text-align: center;
            padding: 0 15px;
            position: relative;
            color: $uni-text-color;

            &-active {
              color: $uni-text-color-hot;
            }
          }
        }
        .underline {
          height: 2px;
          width: 24px;
          background-color: $uni-text-color-hot;
          border-radius: 3px;
          transition: 0.5s;
          position: absolute;
          bottom: 0;
        }
      }
    }
  }
}
</style>
